<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../static/css/bootstrap.min.css"  type="text/css" rel="stylesheet">
    <link href="../static/css/jquery-ui.css"  type="text/css" rel="stylesheet">
    <!--日历-->
    <link  href="../static/css/jquery-ui-timepicker-addon.css"  rel="stylesheet">
    <!--日历-->
    <link href="../static/css/index.css" type="text/css" rel="stylesheet">
    <link  href="../static/css/zTreeStyle.css" type="text/css" rel="stylesheet">
    <!--树状图-->
    <title>通知--通知发布</title>
   

    <!--datepicker 年月日   dtimepiece时分秒-->
    </head>

    <body>
<!--头部-->
<nav class="navbar navbar-default navbar-fixed-top  top" role="navigation">
      <div class="container-fluid">
    <div class="navbar-header" style=" width:100%;"> <a class="navbar-brand" href="javascript:history.go(-1);"  style=" width:100%;  padding-right:0px;"> <span class="glyphicon glyphicon-arrow-left white"></span> 
      <!--    <span class="glyphicon glyphicon-pause white" style="margin-left:2%;"></span>--> 
      <span class="white" style="margin-left:10%">通知发布--添加</span> <span class="glyphicon glyphicon-user white" style="float:right"></span> </a> </div>
  </div>
      <!-- /.container-fluid --> 
    </nav>
<!--头部 end--> 
<!--主体部分-->
<div class="container" style="margin-top:70px;">
      <div class="row row_margin">
    <form class="form-horizontal" role="form" action="" method="post">
          <div class="form-group">
        <label for="" class="col-sm-2  control-label">标题：</label>
        <div class="col-sm-10 ">
              <input type="text" class="form-control" id=""   value="">
            </div>
      </div>
          <div class="form-group">
        <label for="" class="col-sm-2  control-label">发布部门：</label>
        <div class="col-sm-10 ">
              <select class="form-control" id="s1" onchange="a()">
            <option>校长</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>自定义</option>
          </select>
              <div class="row" style="margin-top:8px">
            <div class="col-xs-8">
                  <input id="new" placeholder="添加新的" class="form-control" >
                </div>
            <div  class="col-xs-4 "><span id="add"  class="btn btn-warning" >添加</span> </div>
          </div>
              <!--  <input id="new" placeholder="添加新的" class="form-control" >  
                         <span id="add"  class="btn btn-warning">add</span>	
                      --> 
              
            </div>
      </div>
          
          <!--<div class="form-group">
    <div class="input-group">
      
      <input class="form-control" type="email" id="new" placeholder="添加新的" >
      <div class="input-group-addon">@</div>
    </div>
  </div>             
-->
          
          <div class="form-group">
        <label for="" class="col-sm-2  control-label">发布时间：</label>
        <div class="col-sm-10 ">
              <input type="text" id="datepicker" class="form-control " >
            </div>
      </div>
          <div class="form-group">
        <label for="" class="col-sm-2  control-label">文章内容：</label>
        <div class="col-sm-10 ">
              <textarea id="category_content" name="category_content" rows="22" cols="80" style="width: 100%"></textarea>
            </div>
      </div>
          <div class="form-group">
        <label for="" class="col-sm-2  control-label">拍照：</label>
        <div class="col-sm-10 "> 
              
              <!--  <button type="button" class="btn btn-success">点击拍照</button>-->
              <input type="file" accept="image/*" capture="camera">
            </div>
      </div>
          <div class="form-group">
        <label for="" class="col-sm-2  control-label">附件：</label>
        <div class="col-sm-10 ">
              <input type="file" id="exampleInputFile">
            </div>
      </div>
          <div class="form-group">
        <label for="" class="col-sm-2  control-label">阅读对象：</label>
        <div class="col-sm-10 ">
              <div class="col-xs-4">
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">选择教师</button>
          </div>
              <div class="col-xs-4">
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModa2">选择学生</button>
          </div>
              
              <!-- Modal -->
              <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                  <div class="modal-content">
                <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                      <h4 class="modal-title" id="myModalLabel">选择教师</h4>
                    </div>
                <div class="modal-body">
                      <ul id="tree2" class="ztree">
                  </ul>
                      <div style="display:none;"> 被勾选时：
                    <input type="checkbox" id="py" class="checkbox first" checked />
                    <span>关联父</span>
                    <input type="checkbox" id="sy" class="checkbox first" checked />
                    <span>关联子</span><br/>
                    取消勾选时：
                    <input type="checkbox" id="pn" class="checkbox first" checked />
                    <span>关联父</span>
                    <input type="checkbox" id="sn" class="checkbox first" checked />
                    <span>关联子</span><br/>
                  </div>
                    </div>
                <div class="modal-footer">
                      <button type="button" class="btn btn-primary">确定</button>
                    </div>
              </div>
                </div>
          </div>
              
              <!--Modal  end--> 
              
              <!-- Modal -->
              <div class="modal fade" id="myModa2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                  <div class="modal-content">
                <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                      <h4 class="modal-title" id="myModalLabel">选择学生</h4>
                    </div>
                <div class="modal-body">
                      <ul id="treeDemo" class="ztree">
                  </ul>
                      <div style="display:none;"> 被勾选时：
                    <input type="checkbox" id="py" class="checkbox first" checked />
                    <span>关联父</span>
                    <input type="checkbox" id="sy" class="checkbox first" checked />
                    <span>关联子</span><br/>
                    取消勾选时：
                    <input type="checkbox" id="pn" class="checkbox first" checked />
                    <span>关联父</span>
                    <input type="checkbox" id="sn" class="checkbox first" checked />
                    <span>关联子</span><br/>
                  </div>
                    </div>
                <div class="modal-footer">
                      <button type="button" class="btn btn-primary">确定</button>
                    </div>
              </div>
                </div>
          </div>
              
              <!--Modal  end--> 
              
            </div>
        <!--col-sm-10  end--> 
        
      </div>
        </form>
  </div>
      <!--row  end-->
      
      <div class="row row_margin" >
    <button type="button" class="btn btn-primary btn-lg btn-block btn-primary2">确定</button>
  </div>
    </div>
<!--container  end--> 
<!--主体部分  end--> 
<!--底部-->

<div class="container" style="margin-top:25%;">
      <div class="row">
    <div class="footer navbar-fixed-bottom">
          <div class="col-xs-12" style=" height:15%"></div>
          <div class="col-md-4  col-xs-4 text-center" >
        <p class="glyphicon glyphicon-home white footer_font"></p>
        <p><a href="" class="white  footer_font2">首页</a></p>
      </div>
          <div class="col-md-4 col-xs-4 text-center white  ">
        <p class="glyphicon glyphicon-comment white  footer_font"></p>
        <p><a href=""  class="white  footer_font2">消息</a></p>
      </div>
          <div class="col-md-4 col-xs-4 text-center white" >
        <p class="glyphicon glyphicon-asterisk white footer_font"></p>
        <p ><a href=""  class="white  footer_font2">设置</a></p>
      </div>
        </div>
    <!--footer  end--> 
    
  </div>
      <!--row  end--> 
      
    </div>
<!--container  end--> 

<!--底部end--> 

<script src="../static/js/jquery.min.js" type="text/javascript"></script> 
<script src="../static/js/bootstrap.min.js"  type="text/javascript"></script> 
<script src="../static/js/jquery-ui.js"  type="text/javascript"></script><!--日历--> 
<script src="../static/js/jquery-ui-timepicker-addon.js"  type="text/javascript"></script><!--日历--> 
<script src="../static/js/jquery.ui.datepicker-zh-CN.js.js" type="text/javascript" charset="gb2312"></script><!--中文 日历--> 
<script src="../static/js/jquery-ui-timepicker-zh-CN.js" type="text/javascript"></script><!--中文 日历--> 
<script type="text/javascript" src="../static/js/jquery.ztree.core-3.5.js"></script><!--树状图--> 
<script type="text/javascript" src="../static/js/jquery.ztree.excheck-3.5.js"></script><!--树状图--> 
<!--日历--> 
<script>
  $(function() {
    $( "#datepicker" ).datepicker({
		
        changeMonth: true,
        changeYear: true
	  
    });
	
	$( "#datepicker2" ).datepicker({
		
        changeMonth: true,
        changeYear: true
	  
    });
  });
  </script> 

<!--编辑器--> 
<script type="text/javascript" src="../static/xhe/xheditor-1.2.2.min.js"></script> 
<script type="text/javascript" src="../static/xhe/xheditor_lang/zh-cn.js"></script> 
<script type="text/javascript">
$(pageInit);
function pageInit()
{
	$.extend(XHEDITOR.settings,{shortcuts:{'ctrl+enter':submitForm}});//修改默认设置
	$('#category_content').xheditor({modalWidth:700,modalHeight:500,upBtnText:'浏览',upLinkUrl:"!ckfinder/upload.html",upImgUrl:"!ckfinder/upload.html?type=Images",upFlashUrl:"!ckfinder/upload.html?type=Flash",upMediaUrl:"!ckfinder/upload.html"});
}
function submitForm(){$('#myform').submit();}
</script> 
 <script type="text/javascript">
        jQuery(function () {
            // 时间设置
            jQuery('#datepicker').datetimepicker({
                timeFormat: "HH:mm:ss",
                dateFormat: "yy-mm-dd"
            });


 jQuery('#datepicker2').datetimepicker({
                timeFormat: "HH:mm:ss",
                dateFormat: "yy-mm-dd"
            });




        });
		
		
		
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#new").hide();
            $("#add").hide();
			
            $("#add").click(function(){
                $("#s1").append("<option>"+$("#new").val()+"</option>");
                $("#new").val('');
            });
        });
        function a()
        {
            var val = $("#s1").val();
            if (val == '自定义') {
                $("#new").show();
                $("#add").show();
            } else{
                //alert(val);
            };
        }
    </script>
<script type="text/javascript">
		var setting = {
			check: {
				enable: true,	
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};
		var zNodes =[
			{ id:1, pId:0, name:"初一级"},
			{ id:11, pId:1, name:"初一1班",},
			{ id:11, pId:1, name:"初一2班",},
			{ id:11, pId:1, name:"初一3班",},
			{ id:2, pId:0, name:"初二级"},
			{ id:21, pId:2, name:"初二2班"},
			{ id:21, pId:2, name:"初二2班"},
			{ id:21, pId:2, name:"初二2班"},
			{ id:21, pId:2, name:"初二2班"},
			{ id:3, pId:0, name:"初三级"},
			{ id:31, pId:3, name:"初三2班"},
			{ id:31, pId:3, name:"初三2班"},
			{ id:31, pId:3, name:"初三2班"},
			{ id:31, pId:3, name:"初三2班"},
		];
		var code;
		
		function setCheck1() {
			var zTree = $.fn.zTree.getZTreeObj("tree2"),
			py = $("#py").attr("checked")? "p":"",
			sy = $("#sy").attr("checked")? "s":"",
			pn = $("#pn").attr("checked")? "p":"",
			sn = $("#sn").attr("checked")? "s":"",
			type = { "Y":py + sy, "N":pn + sn};
			zTree.setting.check.chkboxType = type;
			showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
		}
		function showCode(str) {
			if (!code) code = $("#code");
			code.empty();
			code.append("<li>"+str+"</li>");
		}
		$(document).ready(function(){
			$.fn.zTree.init($("#tree2"), setting, zNodes);
			setCheck1();
			$("#py").bind("change", setCheck1);
			$("#sy").bind("change", setCheck1);
			$("#pn").bind("change", setCheck1);
			$("#sn").bind("change", setCheck1);
		});
		
		function c()
{
	var delidID = "";
	var zTree = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes(true);//获取所有选中状态的节点  
	for (var i = 0; i < zTree.length; i++) {  
		//delidID += zTree[i].id + ",";
		$("#hiddenBox").append('<input type="hidden" name="pid[]" value="'+zTree[i].id+'">');
	}
	var zTree = $.fn.zTree.getZTreeObj("tree2").getCheckedNodes(true);//获取所有选中状态的节点  
	for (var i = 0; i < zTree.length; i++) {  
		//delidID += zTree[i].id + ",";
		$("#hiddenBox").append('<input type="hidden" name="pid[]" value="'+zTree[i].id+'">');
	}
} 		
</script> 
<script type="text/javascript">
		var setting = {
			check: {
				enable: true,	
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};
		var zNodes =[
			{ id:1, pId:0, name:"初一级"},
			{ id:11, pId:1, name:"初一1班",},
			{ id:11, pId:1, name:"初一2班",},
			{ id:11, pId:1, name:"初一3班",},
			{ id:2, pId:0, name:"初二级"},
			{ id:21, pId:2, name:"初二2班"},
			{ id:21, pId:2, name:"初二2班"},
			{ id:21, pId:2, name:"初二2班"},
			{ id:21, pId:2, name:"初二2班"},
			{ id:3, pId:0, name:"初三级"},
			{ id:31, pId:3, name:"初三2班"},
			{ id:31, pId:3, name:"初三2班"},
			{ id:31, pId:3, name:"初三2班"},
			{ id:31, pId:3, name:"初三2班"},
		];
		var code;
		
		function setCheck() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			py = $("#py").attr("checked")? "p":"",
			sy = $("#sy").attr("checked")? "s":"",
			pn = $("#pn").attr("checked")? "p":"",
			sn = $("#sn").attr("checked")? "s":"",
			type = { "Y":py + sy, "N":pn + sn};
			zTree.setting.check.chkboxType = type;
			showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
		}
		function showCode(str) {
			if (!code) code = $("#code");
			code.empty();
			code.append("<li>"+str+"</li>");
		}
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			setCheck();
			$("#py").bind("change", setCheck);
			$("#sy").bind("change", setCheck);
			$("#pn").bind("change", setCheck);
			$("#sn").bind("change", setCheck);
		});
</script>
</body>
</html>
